import React from 'react';
import { Col, Row, Select } from 'antd';
import styles from './IndexMoreInfo.less';
import { languageLabelConfig } from '../../utils/globalMaps';

const IndexMoreInfo: React.FC = () => {
  return (
    <div className={styles.container}>
      <Row>
        <Col span={4}>
          <div className={styles.label}>快速链接</div>
          <div className={styles.linkItem}>Global locations</div>
          <div className={styles.linkItem}>Global locations</div>
          <div className={styles.linkItem}>Global locations</div>
          <div className={styles.linkItem}>Global locations</div>
          <div className={styles.linkItem}>Global locations</div>
        </Col>
        <Col span={4}>
          <div className={styles.label}>产品</div>
          <div className={styles.linkItem}>Global locations</div>
          <div className={styles.linkItem}>Global locations</div>
          <div className={styles.linkItem}>Global locations</div>
          <div className={styles.linkItem}>Global locations</div>
          <div className={styles.linkItem}>Global locations</div>
        </Col>
        <Col span={4}>
          <div className={styles.label}>解决方案</div>
          <div className={styles.linkItem}>Global locations</div>
          <div className={styles.linkItem}>Global locations</div>
          <div className={styles.linkItem}>Global locations</div>
          <div className={styles.linkItem}>Global locations</div>
          <div className={styles.linkItem}>Global locations</div>
        </Col>
        <Col span={4}>
          <div className={styles.label}>财码社区</div>
          <div className={styles.linkItem}>Global locations</div>
          <div className={styles.linkItem}>Global locations</div>
          <div className={styles.linkItem}>Global locations</div>
          <div className={styles.linkItem}>Global locations</div>
          <div className={styles.linkItem}>Global locations</div>
        </Col>

        <Col flex={1} className={styles.languageWrap}>
          <Select defaultValue="1" className={styles.select}>
            {Object.entries(languageLabelConfig).map(([key, value]) => (
              <Select.Option value={value.sign} key={key}>
                {key}
              </Select.Option>
            ))}
          </Select>
        </Col>
      </Row>

      <div className={styles.bottomInfo}>
        <div>
          <a>400-000-000</a>
          <strong>上海普陀区铜川路68-2创邑space316</strong>
        </div>
        <div>
          <div className={styles.sitelinks}>
            <a>Privacy</a>
            <a>Terms of use</a>
            <a>Accessibility</a>
            <a>Sitemap</a>
            <a>FAQ</a>
          </div>
          <div className={styles.copyright}>
            Copyright © 2019 WeWork Companies Inc. All rights reserved
          </div>
        </div>
      </div>
    </div>
  );
};

export default IndexMoreInfo;
